<template>
  <div class="rightslist">
    <!-- 面包屑导航 -->
    <div class="Breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
          <a href="javascript:;">权限管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 权限列表 -->
    <div class="tablelist">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="authName" label="权限名称" ></el-table-column>
        <el-table-column prop="path" label="路径"></el-table-column>
        <el-table-column  label="层级">
            <!-- 因为需要把数字变为文字，需要使用过滤器，可是过滤器只能在插值表达式中使用，不能在属性中使用，需要通过作用域插槽，把值设置为scope.row.level ，最后在通过自定义过滤器名进行过滤。 最终表达式为{{scope.row.level | filterlevel}}-->
            <template slot-scope="scope" >
                {{scope.row.level | filterlevel}}
                <!-- <button @click='test(scope)'>aa</button> -->
            </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 引入getrights方法
import { getrights } from '@/api/index.js'
export default {
  data () {
    return {
      tableData: []// 列表的变量，设置成一个空数组
    }
  },
  //   过滤器，过滤层级level，把获取到的数据记性比较后进行返回指定的内容显示
  filters: {
    filterlevel (level) {
      if (level === '0') {
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else if (level === '2') {
        return '三级'
      }
    }
  },
  created () {
    //   在页面一开始的时候就执行去获取权限列表数据
    this.initRightsList()
  },
  methods: {
    //  初始化获取到权限列表的数据
    initRightsList () {
      // 使用getrights方法，不用传参，把返回值赋值给数据tableData
      getrights('list')
        .then(res => {
        //   console.log(res)
          this.tableData = res.data.data
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.rightslist {
  .Breadcrumb {
    padding: 15px 10px;
    background-color: #f5f5f5;
    margin-bottom: 10px;
  }
}
</style>
